<html>
  <head></head>
  <body></body>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const shadow = document.body.attachShadow({mode: 'open'});
      shadow.append(document.createElement('div'));
      const style = document.createElement('style');
      style.textContent = `
        div {
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
          height: 100px;
          background-color: red;
          animation-name: z-spin;
          animation-duration: 5s;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }

        @keyframes z-spin {
          0%    { transform: rotateZ(0deg); }
          100%  { transform: rotateZ(360deg); }
        }
      `;
      shadow.append(style);
    }, false);
  </script>
</html>
